<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-width="80px"
    class="traffic-report-form"
  >
    <el-form-item label="事件编号" prop="eventId">
      <el-input v-model="formData.eventId" placeholder="例如:SJ202501010810" />
    </el-form-item>

    <el-form-item label="事件类型" prop="eventType">
      <el-select
        v-model="formData.eventType"
        placeholder="请选择事件类型"
        style="width: 100%"
      >
        <el-option label="拥堵" value="拥堵" />
        <el-option label="事故" value="事故" />
        <el-option label="施工" value="施工" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>

    <el-form-item label="事件等级" prop="eventLevel">
      <el-select
        v-model="formData.eventLevel"
        placeholder="请选择事件等级"
        style="width: 100%"
      >
        <el-option label="轻微" value="1" />
        <el-option label="一般" value="2" />
        <el-option label="严重" value="3" />
      </el-select>
    </el-form-item>

    <el-form-item label="发生时间" prop="eventTime">
      <el-date-picker
        v-model="formData.eventTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="例如:2025-01-01 12:00:00"
        style="width: 100%"
      />
    </el-form-item>

    <el-form-item label="发生地点" prop="eventLocation">
      <el-input v-model="formData.eventLocation" placeholder="请输入发生地点" />
    </el-form-item>

    <el-form-item label="车牌号" prop="carNumber">
      <el-input v-model="formData.carNumber" placeholder="例如:鄂A12345" />
    </el-form-item>

    <el-form-item label="驾驶员" prop="driver">
      <el-input v-model="formData.driver" placeholder="驾驶员姓名" />
    </el-form-item>

    <el-form-item label="处理状态" prop="processStatus">
      <el-select
        v-model="formData.processStatus"
        placeholder="请选择处理状态"
        style="width: 100%"
      >
        <el-option label="未处理" value="0" />
        <el-option label="处理中" value="1" :disabled="userRole === 'normal'" />
        <el-option label="已处理" value="2" :disabled="userRole === 'normal'" />
      </el-select>
      <div v-if="userRole === 'normal'" class="status-info">
        <el-tag size="small" type="info">普通用户只能选择"未处理"状态</el-tag>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  coordinates: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['submit'])
const route = useRoute()

const formRef = ref(null)

// 获取当前用户角色
const userRole = computed(() => {
  // 通过路由路径判断用户角色
  const path = route.fullPath
  if (path.includes('/admin')) {
    return 'admin'
  } else if (path.includes('/traffic')) {
    return 'traffic'
  } else {
    return 'normal'
  }
})

// 生成表单数据
const formData = reactive({
  eventId: `SJ${new Date().getTime().toString().slice(-10)}`,
  eventType: '拥堵',
  eventLevel: '1',
  eventTime: new Date()
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    })
    .replace(/[/]/g, '-'),
  eventLocation: '',
  carNumber: '',
  driver: '',
  processStatus: '0',
})

// 根据用户角色设置初始处理状态
onMounted(() => {
  // 普通用户只能是"未处理"
  if (userRole.value === 'normal') {
    formData.processStatus = '0'
  }
})

// 表单验证规则
const rules = reactive({
  eventId: [
    { required: true, message: '请输入事件编号', trigger: 'blur' },
    {
      pattern: /^SJ\d{10}$/,
      message: '事件编号格式必须为SJ开头加10位数字',
      trigger: 'blur',
    },
  ],
  eventLocation: [
    { required: true, message: '请输入发生地点', trigger: 'blur' },
  ],
  carNumber: [
    {
      pattern:
        /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-Z0-9]{5,6}$/,
      message: '例如：鄂A12345',
      trigger: 'blur',
    },
  ],
})

// 表单提交方法（供父组件调用）,返回表单数据
const submitForm = async () => {
  if (!formRef.value) return null
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      if (valid) {
        // 将表单数据转换为数组格式(按照地图文档的格式来 )
        const formValues = [
          formData.eventId,
          formData.eventType,
          parseInt(formData.eventLevel),
          formData.eventTime,
          formData.eventLocation,
          formData.carNumber,
          formData.driver,
          parseInt(formData.processStatus),
        ]
        resolve(formValues)
      } else {
        reject('表单验证失败')
        return false
      }
    })
  })
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
    // 重置eventId和eventTime
    formData.eventId = `SJ${new Date().getTime().toString().slice(-10)}`
    formData.eventTime = new Date()
      .toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      })
      .replace(/[/]/g, '-')

    // 普通用户只能是"未处理"
    if (userRole.value === 'normal') {
      formData.processStatus = '0'
    }
  }
}

// 暴露方法给父组件
defineExpose({
  submitForm,
  resetForm,
})
</script>

<style lang="scss" scoped>
.traffic-report-form {
  padding: 20px 10px;

  .el-input,
  .el-select,
  .el-date-picker {
    width: 100%;
  }

  .status-info {
    margin-top: 5px;
    font-size: 12px;
  }
}
</style>
